<template>
    <div class="register-container">
        <div class="register-box">
            <h2>用户注册</h2>
            <div class="input-group">
                <label for="reg-username">用户名：</label>
                <input id="reg-username" type="text" v-model="newUser.username" placeholder="请输入用户名">
            </div>
            <div class="input-group">
                <label for="reg-password">密码：</label>
                <input id="reg-password" type="password" v-model="newUser.password" placeholder="请输入密码">
            </div>
            <div class="input-group">
                <label for="reg-email">邮箱：</label>
                <input id="reg-email" type="email" v-model="newUser.email" placeholder="请输入邮箱">
            </div>
            <button class="register-btn" @click="register">注册</button>
            <button class="back-btn" @click="back">返回登录</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const newUser = ref({
    username: '',
    password: '',
    email: '',
    role_id: 1,
    created_at: new Date().getTime()
})

const register = async () => {
    // 简单表单验证
    if (!newUser.value.username || !newUser.value.password || !newUser.value.email) {
        alert('请填写完整信息')
        return
    }

    try {
        // 发送注册请求
        const response = await axios.post(
            'http://localhost:8080/MDMS0214_war/user/add',
            newUser.value
        )
        
        if (response.data > 0) {
            alert('注册成功，请登录')
            router.push({ name: 'login' })
        } else {
            alert('注册失败，请重试')
        }
    } catch (error) {
        console.error('注册失败:', error)
        if (error.response && error.response.data && error.response.data.message) {
            alert(error.response.data.message)
        } else {
            alert('注册失败，请稍后重试')
        }
    }
}

const back = () => {
    router.push({ name: 'login' })
}
</script>

<style scoped>
.register-container {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('/png/beijing.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

.register-box {
    background-color: transparent;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    width: 400px;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.6s ease-out;
}

h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #333;
    font-size: 16px;
}

.input-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #1a73e8;
    background-color: white;
}

.register-btn {
    width: 100%;
    padding: 15px;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.register-btn:hover {
    background-color: #155da0;
    transform: translateY(-3px);
}

.back-btn {
    width: 100%;
    padding: 15px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 18px;
    font-weight: 600;
}

.back-btn:hover {
    background-color: #d32f2f;
    transform: translateY(-3px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
</style>